2c:null 2d:["$","title",null,{"children":"D3 Excercises | Stanford Visualization | Observable"}] 32:T589,{ // Make a local copy of the data for this cell to work with. Will reset data to circle_position_data when cell is rerun const circle_pos_data_clone = JSON.parse(JSON.stringify(circle_position_data)); const svgContainer = d3.create('svg') .attr('width', 200) .attr('height', 200) .style('background-color', 'whitesmoke'); svgContainer.selectAll('circle') //Copy the code you wrote earlier to create the circles .call(d3.drag() .subject(function(event,d) { return {x: xScale(d.x), y: yScale(d.y)}; }) .on('start',dragStarted) .on('drag',dragged) .on('end',dragEnded) ); // Callback functions for the drag function dragStarted() { d3.select(this).attr(/* fill in */); // set stroke attr to red } function dragged(event, d) { //event.x is in pixel space, d.x need to be in data spce. d.x = /* fill in */; //Convert the event.x to data space and set d.x d.y = /* fill in */; //Convert the event.y to data space and set d.y d3.select(this) .attr("cx", /* fill in */) //set the p[osition of the circle by converting d.x back to pixel space .attr("cy", /* fill in */); //set the p[osition of the circle by converting d.y back to pixel space } function dragEnded() { d3.select(this).attr(/* fill in */); //set stroke attr to null } return svgContainer.node(); }33:T8de,{ // Make a local copy of the data for this cell to work with. Will reset data to circle_position_data when cell is rerun const circle_pos_data_clone = JSON.parse(JSON.stringify(circle_position_data)); // Add an id to circle_position_data circle_pos_data_clone.forEach(function(d, i) { d.id = i;}); const svgContainer = d3.create('svg') .attr('width', 200) .attr('height', 200) .style('background-color', 'whitesmoke'); const circleGroups = svgContainer.selectAll('circle') .data(circle_pos_data_clone) .join('g') //join a element here. // create lime green circles of radius 8 and positions based on data circleGroups.append('circle') .attr('class', 'greenCircle') .attr("id", function(d) { return "circle_border" + d.id; }) .attr('r', /* fill in */) .attr('cx',/* fill in */) .attr('cy',/* fill in */) .attr('fill', /* fill in */); // create blue circles of radius 5 and positions based on data circleGroups.append('circle') .attr('class', 'blueCircle') .attr('r', /* fill in */) .attr('cx',/* fill in */) .attr('cy',/* fill in */) .attr('fill', /* fill in */) .call(d3.drag() .subject(function(event,d) { return {x: xScale(d.x), y: yScale(d.y)}; }) .on('start',dragStarted) .on('drag',dragged) .on('end',dragEnded) ) // Callback functions for the drag function dragStarted(event, d) { //*set color of outter circle stroke to red using d3.select() -- selecting on #circle_border + d.id } function dragged(event, d) { //Set d.x and d.y based on event.x and event.y as before d.x = /* fill in */; d.y = /* fill in */; //Update position of blue circle d3.select(this) .attr("cx", /* fill in */) .attr("cy", /* fill in */); //Update position of green circle -- select based on #circle_border + d.id d3.select(/* fill in */) .attr("cx", /* fill in */) .attr("cy", /* fill in */); } function dragEnded(event, d) { /* Remove color of outter circle stroke */ } return svgContainer.node(); }34:Tc48,{ // Make a local copy of the data for this cell to work with. Will reset data to circle_position_data when cell is rerun const circle_pos_data_clone = JSON.parse(JSON.stringify(circle_position_data)); // Add an id to circle_position_data circle_pos_data_clone.forEach(function(d, i) { d.id = i;}); //Hold circle size as part of circle position data circle_pos_data_clone.forEach(function(d, i) { d.size = 5;}); //Can't directly interact with svg -- have to rerun cell before interacting to get the right thing to happen. const svgContainer = d3.create('svg') //Copy container code you set up earlier. const circleGroups = svgContainer.selectAll('circle') .data(circle_pos_data_clone) .join('g') // create lime green circles of radius 8 and positions based on data circleGroups.append('circle') .attr('class', 'greenCircle') //Change id so we don't select prev. border circles in drag selection .attr("id", function(d) { return "circle_green" + d.id; }) .attr('r', /* fill in */) // Use d.size to set size attr. .attr('cx', /* fill in */) .attr('cy', /* fill in */) .attr('fill', /* fill in */) .call(d3.drag() .subject(function(event,d) { return {x: event.x, y: event.y}; }) .on('start',resizeDragStarted) .on('drag',resizeDragged) .on('end',resizeDragEnded) ) // create blue circles of radius 5 and positions based on data circleGroups.append('circle') .attr('class', 'blueCircle') .attr("id", function(d) { return "circle_blue" + d.id; }) .attr('r', /* fill in */) // Use d.size to set size attr. .attr('cx', /* fill in */) .attr('cy', /* fill in */) .attr('fill', /* fill in */) .call(d3.drag() .subject(function(event,d) { return {x: xScale(d.x), y: yScale(d.y)}; }) .on('start',dragStarted) .on('drag',dragged) .on('end',dragEnded) ) //Callbacks for the resizeDrag function resizeDragStarted(event, d) { //Add blue stroke to outter edge of green circle } function resizeDragged(event, d) { //Compute distance between event.x, event.y and d.x,d.y in pixel space. //Then set distance as the new radius of the blue circles and set this distance + 3 as the radius // of the green circles const distFromCircleCenter = /* fill in */ d.size = distFromCircleCenter; d3.select(/*select green circles*/) .attr("r", /* fill in */); d3.select(/*select corresponding blue circles using id attr.*/) .attr("r", /* fill in */) } function resizeDragEnded(event, d) { //Remove blue stroke from outter edge of green circle } // Callback functions for the movement drag function dragStarted(event, d) { //Add red stroke to outter edge of green circle } function dragged(event, d) { // Copy code we used earlier for translating the circles } function dragEnded(event, d) { //Remove red stroke from outter edge of green circle } return svgContainer.node(); }35:[] 30:{"id":"28cdaf28c4c1565b","slug":"d3-excercises","title":"D3 Excercises","thumbnail":"244b20df917744e96cd35d2163bc94d291494346139e797879516d9d20aebeef","access_level":"unlisted","create_time":"$D2020-10-05T18:58:27.827Z","update_time":"$D2021-10-13T06:00:09.818Z","view_time":null,"first_public_time":"$D2020-10-08T06:47:38.783Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"064c943ba6a07292","login":"stanfordvis","name":"Stanford Visualization","avatar_url":"https://avatars-next.observableusercontent.com/2a4662d76ddc4e8af163f38a894b7dee483e6eee05971cfed3099a7294121cae","tier":"education_2026"},"version":339,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0cdb76d88ad28e97","login":"magrawala","name":"Maneesh Agrawala","avatar_url":"https://avatars-next.observableusercontent.com/e55499563a4b685b3f94d1d0d5105050a0156951870321631fc6d083fc61138b","tier":null}],"members":[{"type":"individual","id":"0cdb76d88ad28e97","login":"magrawala","name":"Maneesh Agrawala","avatar_url":"https://avatars-next.observableusercontent.com/e55499563a4b685b3f94d1d0d5105050a0156951870321631fc6d083fc61138b","tier":null,"role":"editor"},{"type":"team","id":"064c943ba6a07292","login":"stanfordvis","name":"Stanford Visualization","avatar_url":"https://avatars-next.observableusercontent.com/2a4662d76ddc4e8af163f38a894b7dee483e6eee05971cfed3099a7294121cae","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":114,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Excercises","cells":[{"id":0,"value":"md`# D3 Excercises\n\nExcercises to build up D3 skills.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"d3=require('d3@7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`\n

Exercise 1

\nUse HTML and SVG to create an SVG region of size 200 x 200 with a \\`background-color\\` style of \\`whitesmoke\\` and draw a blue circle of radius 20 with center at (60,60). \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html`\n\n \n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`\n

Exercise 2

\nMake the same SVG region and blue circle, but this time using D3.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"{\n const svgContainer = d3.create('svg')\n //Set width and height attributes of svg here and set background-color style to 'whitesmoke'\n \n //Once you have the container, append a circle to it of radius 20, at position 60, 60 filled 'blue'\n \n return svgContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`\n

Exercise 3

\nUse [\\`d3.range()\\`](https://observablehq.com/@d3/d3-range) and JavaScript [\\`map()\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to make an array of 5 (x,y) locations lying at random integer positions where x and y lie in the range [1, 5]. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"circle_position_data =\td3.range(5).map(function()\t{\t\n return {\t\n x:\tMath.round(Math.random()\t*\t4 + 1), //\tRandom\tx-pixel\tlocation \n y:\tMath.round(Math.random()\t*\t4\t+\t1)\t//\tRandom\ty-pixel location\n };\t\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`\nInspect the resulting data by clicking open the \\`circle_position_data\\` array or using the [\\`printTable()\\`](https://observablehq.com/@uwdata/data-utilities#printTable) utility we've already imported into this notebook.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md`\nNow use D3 to draw blue circles or radius=5 according to the (x,y) location data in the \\`circle_position_data\\` array. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"{\n // Make a local copy of the data for this cell to work with. Will reset data to circle_position_data when cell is rerun\n const circle_pos_data_clone = JSON.parse(JSON.stringify(circle_position_data)); \n \n const svgContainer = d3.create('svg')\n //Copy container code you set up earlier.\n \n svgContainer. //selectAll 'circle' elements\n //bind to data\n //join 'circle' elements\n //set 'r' attr of circles.\n //set 'cx' attr of circles based on d.x\n //set 'cy' attr of circles based on d.x\n //set 'fill' attr of circles to blue\n \n return svgContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`\n

Exercise 4

\nIt is awkward to have all the points bunched together in the top left corner of the SVG. Use [\\`d3.scaleLinear()\\`](https://observablehq.com/@d3/d3-scalelinear) to construct a \\`xScale()\\` and \\`yScale()\\`functions map the domain [0,5] to the fill width and height to the range [5, 195]. But remember to reverse the y-Axis in the scale function so that the origin is in the bottom left corner rather than the top left corner of the SVG.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"yScale=d3.scaleLinear().domain([0,5]).range([195,5]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"//xScale = d3.scaleLinear().domain([5,195]).range([5,195]);\nxScale=d3.scaleLinear().domain([0,5]).range([5,195]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`\nNow draw the data with D3 using the scale function(s).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"{\n // Make a local copy of the data for this cell to work with. Will reset data to circle_position_data when cell is rerun\n const circle_pos_data_clone = JSON.parse(JSON.stringify(circle_position_data)); \n \n const svgContainer = d3.create('svg')\n .attr('width', 200)\n .attr('height', 200)\n .style('background-color', 'whitesmoke');\n \n svgContainer. \n //Copy the code you wrote earlier to create the circles\n //but this time apply the xScale and yScale functions when you set\n //their positions.\n \n return svgContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`\n

Exercise 5

\nMake the circles draggable using [\\`d3.drag()\\`](https://observablehq.com/@d3/click-vs-drag?collection=@d3/d3-drag). As the circle is dragged set its outer edge to the color red. Remvoe the red stroke when the drag ends.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`\n

Exercise 6

\n\nAdd a larger 'lime' colored circle (of radius = 8) behind each of the blue circles and ensure the circles are dragged together. Red stroke should appear on outter edge of lime circle.\n\nOne strategy is to join a \\`\\`grouping element and then add two circles as children of the grouping element. Then modify the drag code so that dragging on the blue circles moves the lime green circles as well. One way to do this is to add a unique 'id' to each data item in the data table and then use this 'id' to create a an 'id' for each of the lime green circles so we can select them using the 'id' and update their positions as we update the blue circles.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md`\n

Exercise 7

\nAdd the ability to resize a circle when dragging the green border. Follow an approach similar to the one we used for adding dragging, but modify the drag function for the green circles to resize rather than translate. Also put a blue stroke border on the green circle when resizing, but use a red stroke border on the green circle when translating.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"